<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<title>角色中心</title>
<head th:replace="common/incHead :: incHead"></head>
<body class="ok-body-scroll console">
<div class="ok-body home">
    <div class="layui-row ">
        <div class="layui-col-md3">
            <div class="layui-card" layoutH="25">
                <div class="layui-card-header">
                    <div class="ok-card-title">系统信息</div>
                </div>
                <div class="ok-card-body">
                    <ul class="folder-list" style="padding: 0">
                        <li class="p-xxs" th:each="item:${systems}">
                            <a href="javascript:" th:if="${sysSystem.id} == ${item.id}"><i class="layui-icon layui-icon-link"></i>
                                <selection class="text-info">[[${item.systemSort}]]:[[${item.systemName}]]【[[${item.systemCode}]]】</selection>
                            </a>
                            <a th:href="@{/sys/group(systemId=${item.id})}" th:if="${sysSystem.id} != ${item.id}"><i class="layui-icon layui-icon-link"></i>
                                <selection class="">[[${item.systemSort}]]:[[${item.systemName}]]【[[${item.systemCode}]]】</selection>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="layui-col-md9 p-l-sm">
            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="ok-card-title">
                        <div class="layui-btn-container p-t-xxs">
                            <button class="layui-btn layui-btn-sm layui-btn-warm" th:ljUrl="|/sys/group/add?pid=0&systemId=${sysSystem.id}|" th:title="|添加角色:${sysSystem.id}|" ljWidth="600px" ljHeight="400px"
                                    target="ljOpenSubmit"><i class="layui-icon layui-icon-add-circle"></i>添加角色
                            </button>
                            <button class="layui-btn layui-btn-sm layui-btn-normal pull-right btnPageRefresh" lay-event="reload"><i class="layui-icon layui-icon-search"></i>刷新页面</button>
                        </div>
                    </div>
                </div>
                <div class="ok-card-body">
                    <div class="layui-row ljLayTableBox">
                        <table class="layui-hide" id="indexTable" lay-filter="indexTable"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:replace="common/incBottom :: incBottom"></div>
<script th:inline="javascript">
    /*<![CDATA[*/
    var indexData = [];
    /*[# th:each="item,itemStat:${groups}"]*/
    indexData.push({
        id: [[${item.id}]],
        groupSort: [[${item.groupSort}]],
        groupName: [[${item.groupName}]],
        dataStatus: [[${item.dataStatus}]],
        createTime: [[${@lj.date(item.createTime)}]]
    });
    /*[/]*/
    /*]]>*/
</script>
<script th:inline="none">
    layui.use(["element", "jquery", "table", "tree", "form", "okLayer", "okPapper", "okUtils"], function () {
        let table = layui.table;
        let okPapper = layui.okPapper;
        let okLayer = layui.okLayer;
        let tree = layui.tree;
        let form = layui.form;
        let $ = layui.jquery;
        let okUtils = layui.okUtils;
        let config = okUtils.local("okConfig", null) || okConfig || {};
        okLoading.close($);
        table.render({
            elem: '#indexTable',
            data: indexData,
            height: 'full-98',
            page: false,
            limit: indexData.length,
            toolbar: false,
            size: config.tableSize,
            cols: [[
                {field: "id", title: "角色编号", fixed: "left", width: 100},
                {field: "groupSort", title: "角色排序", fixed: "left", width: 100},
                {field: "groupName", title: "角色名称", width: 100},
                {field: "createTime", title: "添加时间", width: 150},
                {title: "操作", align: "center", fixed: "right", templet: "#operationTpl"}
            ]],
            done: function (res, curr, count) {
            }
        });
        okPapper.init();
        // 权限操作
        $("[target='btnGroupLimit']").on("click", function () {
            let ljUrl = $(this).attr("ljUrl");
            let title = $(this).attr("title") || '';
            $.ajax({
                url: ljUrl, type: 'GET', cache: false, data: {}, timeout: 1000 * 20, success: function (data) {
                    okLayer.closeAll();
                    layer.open({
                        type: 1,
                        title: title,
                        shadeClose: false,
                        closeBtn: 1,
                        skin: "slideInRight ok-setting",
                        btn: ["确定", "取消"],
                        shade: [0.8, '#393D49'],
                        offset: 'r',
                        area: ["400px", '100%'],
                        content: data,
                        zIndex: layer.zIndex,
                        yes: function (index, layero) {
                            $(':focus').blur();
                            let layerForm = layero.find('.layui-form');
                            let layFilter = layerForm.attr('lay-filter');
                            let action = layerForm.attr('action');
                            let subFormData = form.val(layFilter);
                            subFormData.limits = okUtils.getTreeCheckId(tree.getChecked('groupLimit'), "res");
                            $.ajax({
                                type: 'POST', url: action, data: subFormData, dataType: "json", cache: false, success: function (data) {
                                    layer.close(index);
                                    if (data.statusCode == '200') {
                                        okLayer.sweetSuccess("提交成功", data.message, function () {
                                            window.location.reload();
                                        });
                                    } else {
                                        okLayer.sweetError("提交失败", data.message);
                                    }
                                }, error: function (xhr) {
                                    okLayer.sweetError("请求数据异常:" + xhr.status, xhr.responseText);
                                    layer.close(index);
                                }
                            });
                        }
                    });
                }, error: function (xhr) {
                    okLayer.sweetError("请求页面异常:" + xhr.status, xhr.responseText);
                    return;
                }
            });
        });
    })
</script>
<!-- 默认统一操作模板 -->
<script type="text/html" id="operationTpl">
    <button th:if="${@lj.limit('SysGroupEdit') gt 0}" class="layui-btn layui-btn-xs" title="模块中心编辑:{{d.id}}" ljUrl="/sys/group/edit?id={{d.id}}" ljWidth="600px" ljHeight="400px" target="ljOpenSubmit">
        <i class="layui-icon layui-icon-edit"></i>角色编辑
    </button>
    <button th:if="${@lj.limit('SysGroupDel') gt 0}" class="layui-btn layui-btn-xs layui-btn-danger" title="确认要删除该模块中心吗?" ljUrl="/sys/group/del?id={{d.id}}" target="ljAjaxTodo">
        <i class="layui-icon layui-icon-delete"></i>删除角色
    </button>
    <button th:if="${@lj.limit('SysGroupLimit') gt 0}" class="layui-btn layui-btn-xs layui-btn-warm" title="权限配置:{{d.id}}" ljUrl="/sys/group/limit?id={{d.id}}" target="btnGroupLimit">
        <i class="layui-icon layui-icon-delete"></i>权限配置
    </button>
</script>
</body>
</html>